<template>
  <el-card>
    <template #header>
      <div>useRequest</div>
    </template>
    <el-descriptions>
      <el-descriptions-item label="返回一个对象，其中包含以下属性：">
        <li>data: 请求返回的数据。</li>
        <li>loading: 请求是否正在进行中。</li>
        <li>error: 请求过程中发生的错误。</li>
        <li>run: 执行请求的方法，可以传入参数作为请求的参数。</li>
        <li>refresh: 重新发起请求的方法，不传参数时使用上一次请求的参数。</li>
        <li>cancel: 取消当前请求的方法。</li>
      </el-descriptions-item>
    </el-descriptions>
    <div>
      name：{{ loading ? "loading" : data?.data?.result?.userInfo?.username }}
    </div>
  </el-card>
</template>

<script setup>
  import { useRequest } from "vue-hooks-plus";
  import { testsapi } from "/@/api/index";

  const { data, loading } = useRequest(() => testsapi.GetUserInfo(), {
    debugKey: "demo",
    loadingDelay: 30000,
  });
</script>

<style lang="scss" scoped></style>
